<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="java.util.ArrayList"%>
<%@page import="readwrite.Connector"%>
<%@page import="buildings.*"%>
<html>
<head>

<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Select module</title>
</head>

<script type="text/javascript" language="javascript">
function newForm()
{
	document.getElementById('houseType').style.display = 'none';
	var newForm = "<div id=\"house\">" +
		"<form name=\"newForm\" method=\"get\" action=\"NewHouse\">"+
	"<table summary=\"House\">"+
	"<tr><td>Areal (m^2): </td><td>"+
	"<input type=\"text\" id=\"areal\" name=\"areal\">"+
	"</td>"+
	"</tr>"+
	"<tr>"+
	"<td>Wall height:</td>"+
	"<td>"+
	"<input type=\"text\" id=\"wallHeight\" name=\"wallheight\">"+
	"</td>"+
	"</tr>"+
	"<tr>"+
	"<td>Population:</td>"+
	"<td>"+
	"<input type=\"text\" id=\"population\" name=\"population\">"+
	"</td>"+
	"</tr>"+
	"<tr>"+
	"<td>"+
	"<select id=\"buildingtypes\" name=\"buildingtypes\">"+
	"<option value=\"1\">Detached house</option>      "+
	"<option value=\"2\">Terraced house</option>"+
	"<option value=\"3\">Linked house</option>"+
	"<option value=\"4\">School</option>"+
	"<option value=\"5\">Supermarket</option>"+
	"</select>"+
	"</td>"+
	"</tr>"+
	"<tr>"+
	"<td>"+
	"<select name=\"byggeforeskrift\" id=\"byggeforeskrift\">"+
	"<option value=\"1\">Building regulation 1949</option>  "    +  
	"<option value=\"2\">Building regulation 1969</option>"+
	"<option value=\"3\">Building regulation 1987</option>"   +   
	"<option value=\"4\">TEK 97</option>"+
	"<option value=\"5\">TEK 07</option>  "+
	"<option value=\"6\">TEK 10</option>"+
	"<option value=\"7\">NS 3700</option>"+
	"</select>"+
	"</td>"+
	"</tr>"+
	"<tr>"+
	"<td>"+
	"<input type=\"button\" value=\"Select\" onclick=\"send()\">"+
	"</td>"+
	"</tr>"+
	"</table>"+
	"</form>"+
	"</div>";
	$("#house").replaceWith(newForm);
}

function houseType()
{
	
	document.getElementById('houseType').style.display = 'block';
	$("#house").replaceWith("<div id=\"house\"></div>");

}

function houseList()
{
	var type = document.getElementById('buildingtypes').value;
	$.get('ModulHouseList', {type:type}, function(responseText)
			{
				$("#house").replaceWith(responseText);
			}
	);
	
}

function add(i)
{

	var houseId = document.getElementById('houseId'+i).value;
	var modulId = document.getElementById('modulId').value;
	$.post('ModulHouseList', {houseId:houseId, modulId:modulId}, function(responseText)
			{
				$("#house").replaceWith(responseText);
			}
	);
}

function send() 
{
	var area = document.getElementById('areal').value;
	var people = document.getElementById('population').value;
	var wallHeight = document.getElementById('wallHeight').value;
	var directivID = document.getElementById('byggeforeskrift').value;
	var typeID = document.getElementById('buildingtypes').value;
	var modulID = document.getElementById('modulId').value;
	//alert(area + "p" + people);
	$.get('NewHouse',{area: area, people: people, wallHeight: wallHeight, dID: directivID, tID: typeID, modulID:modulID}, function(responseText)
			{
				$("#house").replaceWith(responseText);
			}	
	);
	
}

function modulList()
{
	$.get('EditModul', function(responseText)
			{
				$("#list").replaceWith(responseText);
			}
	);
	
}

function pick(i)
{
	document.getElementById('houseButtons').style.display = 'block';
	var modulId = document.getElementById('modulId'+i).value;
	$.post('EditModul',{modulId:modulId}, function(responseText)
			{
				$("#list").replaceWith(responseText);
			}
	);
	alert(modulId);
}
function updateList()
{
	var modulId = document.getElementById('modulId').value;
	
	$.post('EditModul',{modulId:modulId},function(responseText)
			{
				$("#list").replaceWith(responseText);
			});
}

function remove(i)
{
	var houseId = document.getElementById('houseId'+i).value;
	var modulId = document.getElementById('modulId').value;
	var name = document.getElementById('name').value;
	
	$.get('DeleteHouse', {houseId:houseId, modulId:modulId, name:name}, function(responseText)
			{
				$("#list").replaceWith(responseText);
			}
	);
	alert(modulId+"   "+ houseId + "   " + i);
}

function changeName()
{
	var name = document.getElementById('name').value;
	//alert(name);
	var modulId = document.getElementById('modulId').value;
	$.post('EditModul', {name:name, modulId:modulId}, function(responseText)
			{
				$("#list").replaceWith(responseText);
			}
	);
}
</script>


<body onload="modulList()">
<%@ include file="CheckLogin.jsp" %>
<input type="button" value="Back to menu" onclick="location.href='Menu.jsp'" style='margin-top: 5px; font-size:16px; width: 130px; height: 30px;'/>
<input type="reset" value="New module" onclick="location.href='NewModul.jsp'" style='margin-top: 5px; font-size:16px; width: 130px; height: 30px;'>
<br><br>
<h3>Module edition</h3>
<div id="houseButtons">
<input type="button" value="add new building..." onclick="newForm()" style='margin-top: 5px; font-size:16px; width: 200px; height: 30px;'><br>
<input type="button" value="add existing..." onclick="houseType()" style='margin-top: 5px; font-size:16px; width: 200px; height: 30px;'>
</div>
<div id="houseType">
<select id="buildingtypes" name="buildingtypes" onchange="houseList()">
	<option value="1">Detached house</option>
	<option value="2">Terraced house</option>
	<option value="3">Linked house</option>
	<option value="4">School</option>
	<option value="5">Supermarket</option>
	</select>
</div>
<br>
<div id="house"></div>
<br>
<div id="list">
</div>
<div id="footer">

<input type="Button" value="Make an area simulation" onclick='location.href="BigSimulation.jsp"' style='margin-top: 5px; font-size:20px; width: 330px; height: 50px;'>
</div>

</body>
</html>